<template>
  <view
    :class="{
      'date-item': true,
      'current-date': isCurrent,
      'selected-date': isSelected,
      'other-month': !isCurrentMonth
    }"
    @click="handleClick"
  >
    <text>{{ date }}</text>
    <text class="lunar-text">{{ lunar }}</text>
  </view>
</template>

<script>
export default {
  props: {
    date: {
      type: Number,
      default: 0
    },
    year: {
      type: Number,
      default: new Date().getFullYear()
    },
    month: {
      type: Number,
      default: new Date().getMonth() + 1
    },
    isCurrentMonth: {
      type: Boolean,
      default: true
    },
    isCurrent: {
      type: Boolean,
      default: false
    },
    isSelected: {
      type: Boolean,
      default: false
    },
    lunar: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('dateClick', {
        year: this.year,
        month: this.month,
        date: this.date,
        lunar: this.lunar
      });
    }
  }
};
</script>

<style scoped>
/* 样式可以和 util-calendar.vue 中日期项样式保持一致 */
.date-item {
  width: 14.28%;
  text-align: center;
  padding: 5px 0;
}
.current-date {
  background-color: #007aff;
  color: #fff;
}
.selected-date {
  background-color: #f0f0f0;
}
.other-month {
  color: #ccc;
}
.lunar-text {
  font-size: 12px;
}
</style>